<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script type="text/javascript" src="js/init.js"></script>
		<style>
			.f7{
				animation: f7 2s;
				-webkit-animation: f7 2s;
				animation-delay:2s;
				-webkit-animation-delay:2s;
				-moz-animation: f7 2s;
				-ms-animation: f7 2s;
			}
			@keyframes f7{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f7{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f7{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f7{
				0%{display: none;}
				100%{opacity: block;}
			}
			.f6{
				animation: f6 3.5s;
				-webkit-animation: f6 3.5s;
				animation-delay:3.5s;
				-webkit-animation-delay:3.5s;
				-moz-animation: f6 3.5s;
				-ms-animation: f6 3.5s;
			}
			@keyframes f6{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f6{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f6{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f6{
				0%{display: none;}
				100%{opacity: block;}
			}
			.f5{
				animation: f5 5s;
				-webkit-animation: f5 5s;
				animation-delay:5s;
				-webkit-animation-delay:5s;
				-moz-animation: f5 5s;
				-ms-animation: f5 5s;
			}
			@keyframes f5{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f5{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f5{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f5{
				0%{display: none;}
				100%{opacity: block;}
			}
			.f4{
				animation: f4 6.5s;
				-webkit-animation: f4 6.5s;
				animation-delay:6.5s;
				-webkit-animation-delay:6.5s;
				-moz-animation: f4 6.5s;
				-ms-animation: f4 6.5s;
			}
			@keyframes f4{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f4{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f4{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f4{
				0%{display: none;}
				100%{opacity: block;}
			}
			.f3{
				animation: f3 8s;
				-webkit-animation: f3 8s;
				animation-delay:8s;
				-webkit-animation-delay:8s;
				-moz-animation: f3 8s;
				-ms-animation: f3 8s;
			}
			@keyframes f3{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f3{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f3{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f3{
				0%{display: none;}
				100%{opacity: block;}
			}
			.f2{
				animation: f2 9.5s;
				-webkit-animation: f2 9.5s;
				animation-delay:9.5s;
				-webkit-animation-delay:9.5s;
				-moz-animation: f2 9.5s;
				-ms-animation: f2 9.5s;
			}
			@keyframes f2{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f2{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f2{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f2{
				0%{display: none;}
				100%{opacity: block;}
			}
			.f1{
				animation: f1 11s;
				-webkit-animation: f1 11s;
				animation-delay:11s;
				-webkit-animation-delay:11s;
				-moz-animation: f1 11s;
				-ms-animation: f1 11s;
			}
			@keyframes f1{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-webkit-keyframes f1{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-moz-keyframes f1{
				0%{display: none;}
				100%{opacity: block;}
			}
			@-ms-keyframes f1{
				0%{display: none;}
				100%{opacity: block;}
			}
		</style>
	</head>
	<body>
		<div class="index">
			<img src="img/bg.jpg" class="wid100 hei100 pa"/>
			<img src="img/index-title.png" class="index-title"/>
			<div class="flower pr">
				<img src="img/f1.png" class="wid100 f1 d-n"/>
				<img src="img/f2.png" class="f2 d-n"/>
				<img src="img/f3.png" class="f3 d-n"/>
				<img src="img/f4.png" class="f4 d-n"/>
				<img src="img/f5.png" class="f5 d-n"/>
				<img src="img/f6.png" class="f6 d-n"/>
				<img src="img/f7.png" class="f7 d-n"/>
			</div>
			<div class="chicken-feet">
				<img src="img/loading.gif" class="chicken"/>
			</div>
			<a href="game1.html" class="start-game">
				<img src="img/start-game.png" class="wid100"/>
			</a>
			<a href="../game/index.html" class="c-teen">
				<img src="img/c-teen.png" class="wid100"/>
			</a>
			</p>
			<p class="game-rule">
				<a href="javascript:void(0);">游戏规则</a>
			</p>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			/***禁止滑动***/
			var mo = function(e){e.preventDefault();};
			function stop(){
		        document.body.style.overflow='hidden';        
		        document.addEventListener("touchmove",mo,false);//禁止页面滑动
			}
			stop();
			
			var f7 = setTimeout(function(){
				$('.f7').show();
			},1000);
			
			var f6 = setTimeout(function(){
				clearTimeout(f7);
				$('.f6').show();
			},2000);
			
			var f5 = setTimeout(function(){
				clearTimeout(f6);
				$('.f5').show();
			},3000);
			
			var f4 = setTimeout(function(){
				clearTimeout(f5);
				$('.f4').show();
			},4000);
			
			var f3 = setTimeout(function(){
				clearTimeout(f4);
				$('.f3').show();
			},5000);
			
			var f2 = setTimeout(function(){
				clearTimeout(f3);
				$('.f2').show();
			},6000);
			
			var f1 = setTimeout(function(){
				clearTimeout(f2);
				$('.f1').show();
				$('.chicken-feet').animate({'left':'100%'},5000);
			},7000);

		});
	</script>
</html>
